/*=-=-=-=-=-=
card
=-=-=-=-=-=*/
:root .mat-card {
  border-radius: $ainiro_radius;
  padding: 30px;
}

:root .mat-dialog-container {
  padding: 30px;
}

/*=-=-=-=-=-=
table
=-=-=-=-=-=*/
.borderless {

  th.mat-header-cell,
  td.mat-cell {
    padding-right: 8px;
  }

  th.mat-header-cell,
  td.mat-cell,
  td.mat-footer-cell {
    border: none;
  }

  tr.mat-header-row {
    height: 35px;
  }

  tr.mat-row,
  tr.mat-footer-row {
    height: 40px;
  }

  button {
    font-size: 13px;
  }
}

.hoverable {
  tr.mat-row {
    @include general_transition(0.3s);

    &:hover {
      background-color: transparentize($color: $ainiro_default_alt, $amount: 0.5);
    }
  }
}

/*=-=-=-=-=-=
codemirror
=-=-=-=-=-=*/
.CodeMirror {
  border-radius: 5px;
  border: solid 1px rgba(0,0,0,.1);
}

.CodeMirror.CodeMirror-fullscreen {
  position: fixed;
  max-height: unset !important;
  height: auto;
  border-radius: 0 !important;
}

.CodeMirror-scroll {
  overflow: auto !important;
  padding-bottom: 30px;
  margin-bottom: 0;
  max-height: 100%;
}

.CodeMirror-hints {
  position: absolute;
  z-index: 10000;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 2px;
  -webkit-box-shadow: 2px 3px 5px transparentize($color: $ainiro_dark, $amount: 0.8);
  -moz-box-shadow: 2px 3px 5px transparentize($color: $ainiro_dark, $amount: 0.8);
  box-shadow: 2px 3px 5px transparentize($color: $ainiro_dark, $amount: 0.8);
  border-radius: 3px;
  color: $ainiro_dark;
  background-color: #b29762;
  font-size: 90%;
  font-family: monospace;
  max-height: 20em;
  overflow-y: auto;
}

.CodeMirror-hint {
  margin: 0;
  padding: 0 4px;
  border-radius: 2px;
  white-space: pre;
  cursor: pointer;
}

li.CodeMirror-hint-active {
  background: $ainiro_primary;
  color: white;
}

.CodeMirror-dialog-top {
  background-color: $ainiro_default_grey4;
}

app-dashboard>div {
  margin-bottom: -1.5rem;
}

/*=-=-=-=-=-=
accordion
=-=-=-=-=-=*/
.mat-expansion-panel-header.mat-expanded {
  height: 48px;
}

.custom-height-header {
  .mat-expansion-indicator {
    margin-right: 5px;
  }

  .mat-expanded .mat-expansion-indicator {
    margin-top: 10px;
  }

  .mat-expansion-panel-body {
    padding: 0;
  }
}

/*=-=-=-=-=-=
dialog
=-=-=-=-=-=*/
.mat-dialog-content {
  @include scrollbar($ainiro_default_alt, $ainiro_default_grey4, 3px);
}

@media(max-width: 576px) {
  .cdk-overlay-pane {
    max-height: 78vh;
    margin-bottom: 12vh;
  }

  .mat-dialog-content {
    max-height: unset !important;
    overflow: unset !important;
  }
}

/*=-=-=-=-=-=
radio button
=-=-=-=-=-=*/
.card-radio {
  .mat-radio-label-content {
    width: 100%;

    @media (max-width: 576px) {
      img {
        max-width: 32px;
      }
    }

    @media (max-width: 335px) {
      font-size: 11px;
      padding-left: 0;

      img {
        margin-right: -0.5rem
      }
    }
  }
}

.plan-box {
  .mat-radio-label {
    white-space: unset;
  }
}

/*=-=-=-=-=-=
tab
=-=-=-=-=-=*/
.mat-tab-label-active {
  color: $ainiro_primary;
}

.mat-tab-label {
  font-weight: 600;
  font-size: clamp(13px, 2vw, 14px);

  &:not(.mat-tab-disabled) {
    opacity: 1;
  }
}

.pre-tooltip {
  white-space: pre;
}
